<template>
  <div class="login-container">
    <van-nav-bar
      title="列表"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/fenlei')"
      class="header"
    />
    <van-tabs>
      <van-tab v-for="index in 8" :key="index">
        <template #title class="van-tab-title">
          <van-icon name="more-o" class="icon" />分类 {{ index }}</template
        >
        <div @click="$router.push('/xiangqing')">
          内容 {{ index }}
          <van-cell-group>
            <van-cell v-for="value in 5" :key="value">
              <div slot="title">文章标题</div>
              <div slot="label">
                <div>文章内容文章内容文章内容文章内容文章内容文章内容</div>
                <div>
                  <span><van-icon name="eye" />收藏(xxx)</span>
                  &nbsp;
                  <span><van-icon name="good-job" />点赞(4231)</span>
                </div>
              </div>
              <div slot="default">
                <van-image
                  width="100"
                  height="60"
                  src="https://img01.yzcdn.cn/vant/apple-2.jpg"
                />
              </div>
            </van-cell>
          </van-cell-group>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "LieBiaoIndex",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.login-container {
  .header {
    background-color: #1989fa;
  }
  .icon {
    margin-right: 7px;
    transform: translateY(3px);
  }
  /deep/ .van-nav-bar__title {
    color: #fff !important;
  }
  /deep/ .van-nav-bar__left span {
    color: #fff !important;
  }
  /deep/ .van-nav-bar .van-icon {
    color: #fff !important;
  }
}
</style>
